<template>
  <el-card class="box-card" shadow="hover">
    <FontSizeAdaptor/>
    <div slot="header" class="header">
      <span class="header_title">昨日夜间小流排名前十</span>
    </div>
    <vueSeamlessScroll :class-option='defaultOption' :data="dataList" style="height: 100%;overflow: hidden">
      <div class="content">
        <el-row class="content_r" v-for="(item, index) in dataList">
          <el-col :span="2" class="content_c">
            <div style="width: 2vh;height: 2vh;background: #fa9237;border-radius: 50%;text-align: center;font-size: 1.3vh;color: white">
              {{index + 1}}
            </div>
<!--            <el-button circle type="warning" size="mini"  style="height: 15px;">{{index + 1}}</el-button>-->
          </el-col>
          <el-col :span="17" class="content_c font1">
            <el-tooltip effect="dark" :content="item.terminalName == null ? '' : item.terminalName" placement="top">
              <span class="content-item_name">{{item.terminalName == null ? '' : item.terminalName}}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="content_c font2" style="text-align: right;">
            <el-tooltip class="item" effect="dark" :content="item.value == null ? 0 : item.value + 'm³/h'" placement="top">
              <span style="width: 80%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;cursor: pointer">{{item.value == null ? 0 : item.value}} m³/h</span>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </vueSeamlessScroll>

  </el-card>
</template>

<script>
import {nightMinFlowTop10ForDb} from '@/api/index/terminal.js'
import vueSeamlessScroll from 'vue-seamless-scroll'
import FontSizeAdaptor from "../../../components/FontSizeAdaptor/FontSizeAdaptor.vue";

export default {
  name: "NightMinFlowTop10ForDb",
  components: {vueSeamlessScroll,FontSizeAdaptor},
  data() {
    return {
      dataList: [],
    }
  },
  mounted() {
    this.getList()
  },
  computed: {
    defaultOption () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 8,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  methods: {
    getList() {
      nightMinFlowTop10ForDb().then(response => {
        if (response.code === 200) {
          this.dataList = response.data
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card__header {
  padding: 7px 15px 7px 20px !important;
  z-index: 2;
}

::v-deep .el-card__body {
  height: 19vh !important;
}

.content_r {
  height: 30px;
  //padding: 0 5px;

  .content_c{
    line-height: 20px;
    .content-item_name{
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      cursor: pointer;

    }
    ::v-deep .el-button--mini.is-circle{
      //padding: 2px 3px !important;

    }
    .content_c_i{
      color: #fa9237;
      font-size: 2vh;
    }
  }
  .font1 {
    font-size: 1.4vh;
  }
  .font2 {
    font-size: 1.6vh;
    color: #646464;
  }
  .font3 {
    font-size: 1.2vh;
    color: #969696;
  }
}

</style>
